import React, { Component } from 'react';
import { hashHistory } from 'react-router';
import { Grid, WingBlank } from 'antd-mobile';
import * as bookinfoApi from 'common/api/bookinfo.js';
import './bookClassify.less';

/*
 * 书籍分类
 */
class BookClassify extends Component{

	constructor(props) {
	    super(props);
	    this.state = {
	    	bookClassify: []
	    }
	}

	//跳转：分类商品列表
	bookClassifyHandle = (classify) => {
		hashHistory.push("/bookClassifyList/"+classify.text+"/"+classify.key);
	}

	componentDidMount(){
		this.setState({
			bookClassify: bookinfoApi.bookClassify()
		})
	}

	render(){
		return(
			<div className="container book_classify">
				<WingBlank>
					<Grid 
						hasLine={false}
						columnNum={3}
						data={this.state.bookClassify} 
						activeStyle={false}
						renderItem={dataItem => (
					        <div className="book_classify_item" onClick={() => this.bookClassifyHandle(dataItem)}>
					          	<div className="book_classify_item_box" style={{background: `url(${dataItem.icon}) center center / cover`}}>
					          		<span># {dataItem.text}</span>
					          	</div>
					        </div>
				      	)}
					/>
				</WingBlank>
			</div>
		)
	}
}

export default BookClassify;